<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: index-header('发布帖子')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: summernote-css"/>
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body style="background-color: #F5F5F5">

<!--导航栏-->
<div th:replace="include :: headNav"></div>

<div style="background-color: white;margin-top: 50px;margin-bottom: 30px;padding: 20px 30px 17px 30px">
    <span style="font-size: 18px;font-weight: 700;margin-right: 20px">发布帖子</span>
    <span>
        <a href="#" data-toggle="modal" onclick="previewArticle()" data-target="#myModal5" title="预览" style="color: #000;text-decoration: none;cursor: pointer;font-weight: 600">
        <i class="fa fa-eye" style="font-size: 16px;font-weight: 100;color: rgba(0 ,0 ,0 ,0.4)"></i>
        预览</a>
    </span>
    <div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">预览</h4>
<!--                    <small> class="font-bold">这里可以显示副标题。</small>-->
                </div>
                <div class="modal-body" id="preview">

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
<!--                    <button type="button" class="btn btn-primary">保存</button>-->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-div">
    <div class="row">
        <form class="form-horizontal m" method="post" id="form-article-add">
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group" style="margin-bottom: 50px">
                        <div class="col-sm-11">
                            <input type="text" class="form-control" maxlength="30" id="articleTitle" name="articleTitle"
                                   placeholder="输入文章标题" >
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-11" id="article-box">
                            <input type="hidden" class="form-control" id="articleContentHtml" name="articleContent">
                            <div class="summernote" id="articleContent"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4" style="background-color: rgb(255,255,255);padding: 20px ">
                    <div class="tile">
                        <div class="form-group row">
                            <label class="control-label col-md-3" >作者:</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control " maxlength="10" id="articleAuthor" name="articleAuthor"
                                       placeholder="作者">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3">编辑:</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control " maxlength="10" id="articleEdit" name="articleEdit"
                                       placeholder="编辑">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3">文章类型:</label>
                            <div class="col-md-9">
                                <select name="articleType" class="form-control">
                                    <optgroup label="请选择">
                                        <option value="0">原创</option>
                                        <option value="1">转载</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3">开启评论:</label>
                            <div class="col-md-9">
                                <select name="articleComment" class="form-control">
                                    <optgroup label="请选择">
                                        <option value="0">是</option>
                                        <option value="1">否</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3">文章封面:</label>
                            <div class="col-md-9">
                                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                                    <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename ellipsis"></span></div>
                                    <span class="input-group-addon btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input id="articleThumbnailImg" name="articleThumbnailImg" type="file"> <input id="articleThumbnail" name="articleThumbnail" class="form-control hidden" type="text"> </span>
                                    <a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3 ">文章摘要:</label>
                            <div class="col-md-9">
                                    <textarea class="form-control" id="articleSummary" name="articleSummary"
                                              placeholder="请输入文章摘要" maxlength="50" rows="3"></textarea>
                            </div>
                        </div>
                        <!--文章状态-->
                        <input type="text" class="form-control hidden" id="articleStatus" name="articleStatus">
                        <div class="tile-footer">
<!--                            <button type="button" class="btn btn-secondary" onclick="createPost(1)">保存草稿</button>-->

                            <button class="btn btn-info pull-right" onclick="createPost(0)" type="button">发布文章</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: summernote-js"/>
<th:block th:include="include :: jasny-bootstrap-js" />
<script th:src="@{/js/index/index.js}"></script>
<script type="text/javascript">
    var prefix = ctx + "system/article"
    function createPost(articleStatus) {
        var articleTitle  = $("#articleTitle").val()
        var articleAuthor = $("#articleAuthor").val()
        var articleEdit  = $("#articleEdit").val()
        var articleThumbnail = $("#articleThumbnailImg").val()
        var articleSummary = $("#articleSummary").val()
        var articleContent = $('#articleContentHtml').val()
        if (articleTitle==''){
            $.modal.alertWarning('标题不能为空');
        } else if (articleContent==''){
            $.modal.alertWarning('文章内容不能为空');
        }else if(articleAuthor==''){
            $.modal.alertWarning('作者不能为空');
        }else if (articleEdit==''){
            $.modal.alertWarning('编辑不能为空');
        }else if (articleThumbnail==''){
            $.modal.alertWarning('图片不能为空');
        }else if (articleSummary==''){
            $.modal.alertWarning('文章摘要不能为空');
        } else {
            var file = $('#articleThumbnailImg')[0].files[0];
            if (/^image\/\w+$/.test(file.type)) {
                var data = new FormData();
                data.append("file", file);
                $.ajax({
                    type: "post",
                    url: ctx + "common/upload",
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function(result) {
                        $("#articleStatus").val(articleStatus);
                        if (result.code === 0){
                            $('#articleThumbnail').val(result.url)
                            $.operate.save(prefix + "/add", $('#form-article-add').serialize(),function (result) {
                                if (result.code===0){
                                    $('.summernote').summernote('reset');
                                    $.modal.alertSuccess('发布成功');
                                }else {
                                    $.modal.alertWarning('发布失败！');
                                }
                            });
                        }else {
                            $.modal.alertWarning('文章略缩图上传失败！');
                        }
                    }
                })
            } else {
                $.modal.alertWarning('请选择一个图片文件！');
            }
        }
    }

    $(function () {
        $('.summernote').summernote({
            lang: 'zh-CN',
            dialogsInBody: true,
            height: ($(window).height() - 250),
            width: $('#article-box').width(),
            placeholder: '美好的一天，从这里开始！',
            callbacks: {
                onChange: function (contents, $edittable) {
                    $("input[name='" + this.id + "']").val(contents);
                },
                onImageUpload: function (files) {
                    var obj = this;
                    var data = new FormData();
                    data.append("file", files[0]);
                    $.ajax({
                        type: "post",
                        url: ctx + "common/upload",
                        data: data,
                        cache: false,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        success: function (result) {
                            if (result.code == web_status.SUCCESS) {
                                $('#' + obj.id).summernote('insertImage', result.url);
                            } else {
                                $.modal.alertError(result.msg);
                            }
                        },
                        error: function (error) {
                            $.modal.alertWarning("图片上传失败。");
                        }
                    });
                }
            }
        });
    });
    //预览文章
    function previewArticle() {
        var articleContent = $('#articleContentHtml').val()
        console.log(articleContent)
        $('#preview').html(articleContent)
    }
</script>
<style>
    /*清楚浮动*/
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }

    .tile .form-group label {
        font-weight: 700;
    }
    /*显示不全用...表示*/
    .ellipsis {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
</style>
</body>
</html>